<template>
	<view class="app-participant">
		<view class="app-content">
			<view class="app-peo-text dir-left-nowrap main-between cross-center">
				<text>评价双熙堂品牌珠宝：</text>
				<view>
					<app-form-id @click="moreva = true">
						<text class="app-text">查看更多</text>
						<image class="app-icon" src="../../../static/image/icon/arrow-right.png"></image>
					</app-form-id>
				</view>
			</view>
			<template v-if="list.length === 1">
				<block v-for="(item, index) in 1" :key="index">
					<view class="app-item dir-left-nowrap">
						<text>{{index+1}}.</text>{{list[item].content}}
					</view>
				</block>
			</template>
			<template v-if="list.length >= 2">
				<block v-for="(item, index) in 2" :key="index">
					<view class="app-item dir-left-nowrap">
						<text>{{index+1}}.</text>{{list[item].content}}
					</view>
				</block>
			</template>
			<view class="app-participant-model" v-if="moreva" @touchmove.stop.prevent="moveStop">
				<view class="app-content">
					<view class="app-top dir-top-nowrap">
						<text class="app-title">更多评价</text>
						<!-- <text class="app-description">v</text> -->
						<image class="app-icon" src="../../../static/image/icon/close.png" @click="moreva = false">
						</image>
					</view>
					<scroll-view class="app-scroll" scroll-y>
						<view v-for="(item, index) in list" :key="index">
							<text>{{index+1}}.</text>{{item.content}}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'app-goods-comment',
		data() {
			return {
				moreva: false,
				show: 0,
				selectAttr: {},
				attr: {},
				list: []
			}
		},
		props: {
			comment_list: {
				type: Array,
				default () {
					return [];
				}
			},
			theme: String
		},

		methods: {
			moveStop(){},
			morevalist(){
				uni.navigateTo({
					url:'/pages/comments/comments?goods_id=' + this.goodsId
				})
			}
		},
		watch: {
			comment_list: {
				handler(data) {
					this.list = data;
				},
				immediate: true
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-spec {
		height: #{160rpx};
		padding: #{36upx 80upx 30upx 80upx};
		flex-wrap: wrap;
		justify-content: start;

		.arrow {
			width: #{38upx};
			height: #{30upx};
		}

		.item {
			padding-left: 20rpx;

			image {
				width: #{50upx};
				height: #{50upx};
				margin-bottom: #{10upx};
			}

			text {
				font-size: #{24upx};
				line-height: 1;
				color: #666666;
				margin-top: #{10upx};
			}
		}
	}

	.app-participant {
		width: #{750rpx};
		background-color: white;

		.app-left {
			font-size: #{24rpx};
			color: #666666;
		}

		.app-right {
			width: #{134rpx};
		}

		.app-text {
			font-size: #{24rpx};
			color: #999999;
		}

		.app-icon {
			width: #{12rpx};
			height: #{22rpx};
			margin-left: #{12rpx};
		}

		.app-content {
			padding: #{0 24upx 20upx 24upx};
			box-sizing: border-box;
		}

		.app-peo-text {
			font-size: #{24rpx};
			color: #666666;
			padding: #{24rpx} 0;
			box-sizing: border-box;

			.app-icon {
				width: #{12rpx};
				height: #{22rpx};
				margin-left: #{12rpx};
			}

			.app-text {
				font-size: #{24rpx};
				color: #999999;
			}
		}

		.app-item {
			// height: #{100rpx};
			// background-color: #f6f6f6;
			width: #{750-48rpx};
			border-bottom-left-radius: #{8rpx};
			border-top-left-radius: #{8rpx};
			margin-bottom: #{10rpx};

			.app-icon {
				height: #{80rpx};
				width: #{80rpx};
				border-radius: 50%;
				margin-left: #{20rpx};
			}

			.app-name {
				font-size: #{28rpx};
				color: #353535;
				width: #{210rpx};
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				margin-left: #{16rpx};
			}

			.app-go {
				width: #{140rpx};
				height: #{100rpx};
				// line-height: 100rpx;
				line-height: 50rpx;
				font-size: #{24rpx};
				text-align: center;
				color: #ffffff;
				margin-left: #{36rpx};
			}

			.app-text {
				font-size: #{24rpx};
				width: #{198rpx};
				height: #{100rpx};

				text {
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}

				.app-red {
					color: #ff5c5c;
					margin-top: #{14rpx};
				}

				.app-gray {
					color: #707070;
					margin-bottom: #{14rpx};
				}
			}
		}
	}

	.app-participant-model {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1600;
		width: #{750rpx};
		height: 100%;
		background-color: rgba(127, 127, 127, 0.3);

		.app-content {
			width: #{650rpx};
			border-radius: #{16rpx};
			background-color: white;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding-bottom: #{40rpx};

			.app-top {
				border-bottom: #{1rpx} solid #e2e2e2;
				padding-bottom: #{24rpx};
				padding-top: #{32rpx};
				text-align: center;

				.app-title {
					font-size: #{32rpx};
					color: #353535;
				}

				.app-description {
					font-size: #{24rpx};
					color: #999999;
					margin-top: #{12rpx};
				}

				.app-icon {
					position: absolute;
					top: #{24rpx};
					right: #{24rpx};
					width: #{30rpx};
					height: #{30rpx};
				}
			}

			.app-scroll {
				text-align: justify;
				max-height: #{540rpx};
				padding: #{14rpx} #{24rpx} 0 #{24rpx};

				.app-item {
					width: #{650-48rpx};
					// height: #{100rpx};
					margin-bottom: #{10rpx};
					// background-color: #f6f6f6;
					border-bottom-left-radius: #{8rpx};
					border-top-left-radius: #{8rpx};
					position: relative;

					.app-avatar {
						margin-left: #{20rpx};
						width: #{80rpx};
						height: #{80rpx};
						border-radius: 50%;
					}

					.app-content-text {
						width: #{338rpx};
						height: #{100rpx};
						padding-left: #{24rpx};

						.app-top-name-people {
							margin-top: #{13rpx};
						}

						.app-time {
							font-size: #{24rpx};
							color: #666666;
							margin-top: #{12rpx};
						}

						.app-name {
							font-size: #{28rpx};
							color: #353535;
							width: #{118rpx};
							word-break: break-all;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}

						.app-people {
							margin-left: #{20rpx};
							font-size: #{24rpx};
							color: #ff4544;
						}
					}

					.app-go {
						width: #{140rpx};
						height: #{100rpx};
						line-height: #{100rpx};
						color: #ffffff;
						font-size: #{24rpx};
						text-align: center;
						position: absolute;
						right: 0;
					}
				}
			}
		}
	}
</style>
